<template>
	<view class="content">
		<view class="topBg">
			<!-- <u-navbar :is-back="false" :background="background" :border-bottom="false">
				<view style="display: flex;justify-content: center;width: 100%;align-items: center;padding: 0 20rpx; margin-top: -20rpx;">
					<u-image width="150rpx" height="46rpx" src="https://img.koalalf.com/index/topLogo%402x.png">
					</u-image>
					<view class="index-search" @click="openPage('pages/product/search', {type: type})">
						<u-icon name="search" color="#999" size="30"></u-icon>
						<text
							style="color: #999;font-size: 24rpx;margin-left: 10rpx;letter-spacing: 2rpx;">搜索你想要的商品</text>
					</view>
				</view>
			</u-navbar> -->
			<view class="banner">
				<u-swiper :list="swiper" :indicator="true" indicatorMode="dot" height="420" keyName="icon" @click="clickSwiper"></u-swiper>
			</view>
		</view>
		<view v-if="nav.length > 0" style="background-color: #fff;margin:0 20rpx;padding: 20rpx;padding-top: 40rpx;border-radius: 10rpx;">
			<view style="display: flex; flex-direction: row; justify-content: space-between;flex-wrap: wrap;">
				<view v-for="(citem,cindex) in nav" :key="cindex" @click="openPageNav(citem)"
					style="display: flex; flex-direction: column;justify-content: center;align-items: center;width: 120rpx;margin-bottom: 40rpx;">
					<u-image width="80rpx" height="80rpx" :src="citem.icon"></u-image>
					<text
						style="margin-top: 12rpx;font-size: 24rpx;font-weight: 500; font-family:Arial, Helvetica, sans-serif, Courier New', Courier, monospace, Roboto;">{{citem.title}}</text>
				</view>
			</view>
		</view>

		<!-- 秒杀 -->
		<view v-if="miaoshaGoods.length > 0"
			@click="openPage('/pages/product/goodsDetail', {id: miaoshaGoods[0].id, type: miaoshaGoods[0].type})"
			style="width: 710rpx; height:400rpx; background-image: url(https://img.koalalf.com/index/miaosha-index-bg.jpg);background-size: 100%;margin: 20rpx;border-radius: 20rpx;position: relative;margin-bottom: 0;">
			<view
				style="position: absolute;top: 56rpx;font-size: 20rpx;left: 330rpx;font-weight: bold;color: #F3141B; width: 228rpx; display: flex;justify-content: space-around;">
				<text>{{shengyuH}}</text>
				<text>{{shengyuM}}</text>
				<text>{{shengyuS}}</text>
			</view>

			<view
				style="border-radius: 10rpx; overflow: hidden; width: 250rpx; height: 250rpx;position: absolute;top: 120rpx;left: 30rpx;">
				<u-image width="100%" height="100%" :src="miaoshaGoods[0].product.pict_url"></u-image>
			</view>

			<view style="position: absolute;top: 120rpx; left: 312rpx;">
				<view
					style="width: 260rpx;height: 36rpx; overflow: hidden; font-weight: bold;color: #333;font-size: 28rpx;">
					<text>{{miaoshaGoods[0].product.short_title}}</text>
				</view>
				<view
					style="width: 260rpx;height: 36rpx; overflow: hidden; font-weight: bold;color: #666;font-size: 22rpx;margin-top: 10rpx;">
					<text>{{miaoshaGoods[0].product.desc}}</text>
				</view>
			</view>

			<view
				style="color: #F3151B;font-weight: bold;position: absolute;top: 222rpx; left: 366rpx;font-size: 25rpx;">
				<text>日常价￥{{miaoshaGoods[0].product.actual_price}}</text>
			</view>

			<view
				style="font-weight: bold;position: absolute;top: 332rpx; left: 336rpx;display: flex;align-items: baseline;">
				<text style="color: #fff;font-weight: bold;font-size: 20rpx;">限时活动价</text>
				<text style="color: #ff0;font-size: 20rpx;">￥</text>
				<text style="color: #ff0;font-size: 28rpx;">{{miaoshaGoods[0].actual_price}}</text>
			</view>
		</view>

		<!-- 商品列表 -->
		<view style="margin: 20rpx; border-radius: 20rpx;overflow: hidden;">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
				<view style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;">
					<view style="width: 348rpx;background-color: #fff;margin-bottom: 20rpx;"
						v-for="(item,index) in list" :key="index"
						@click="openPage('pages/product/goodsDetail', {id: item.id, type: 5})">
						<goodsItem :goods="item"></goodsItem>
					</view>
				</view>
			</mescroll-body>
		</view>
		<!-- <u-mask :show="couponMaskShow" :mask-click-able="false">
			<view style="display: flex;justify-content: center;align-items: center;height: 100%;">
				<view style="position: relative;display: flex;align-items: center;flex-direction: column;">
					<view class="slot-content" style="width: 440rpx; height: 512rpx;">
						<view
							style="position: relative; width: 100%;height: 100%; background-image: url(https://img.koalalf.com/window/index-coupon.png);background-size: 100%;">
							<view style="position: absolute;top: 200rpx; width: 100%;">
								<view
									style="display: flex;justify-content: center;flex-direction: column;align-items: center;">
									<text
										style="color: #F12E1A;font-weight: bold;font-size: 36rpx;">{{coupon.title}}</text>
									<text
										style="color: #F12E1A;font-size: 28rpx;margin-top: 10rpx;">满{{coupon.use_min_price}}减{{coupon.coupon_price}}优惠券</text>
								</view>
								<view
									style="display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 50rpx;">
									<view style="color: #fff;margin-right: 10rpx;">
										<text style="font-size: 22rpx;">￥</text>
										<text style="font-size: 56rpx;font-weight: bold;">{{coupon.coupon_price}}</text>
									</view>
									<view style="display: flex;flex-direction: column;font-size: 16rpx;color: #fff;">
										<text>优惠券</text>
										<text style="margin-top: 4rpx;">满{{coupon.use_min_price}}可使用</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view style="width: 320rpx;height: 56rpx;margin-top: 40rpx;" @click="couponReceive(coupon.id)">
						<u-image width="100%" height="100%" src="https://img.koalalf.com/window/coupon-botton.png">
						</u-image>
					</view>
					<view style="margin-top: 30rpx;" @click="couponMaskShow = false">
						<u-icon name="close-circle" color="#fff" size="40"></u-icon>
					</view>
				</view>

			</view>
		</u-mask> -->

		<!-- 弹出窗 -->
		<u-overlay :show="upgraeShow" @click="upgraeShow = false">
			<view style="display: flex;justify-content: center;align-items: center;height: 100%;">
				<view style="position: relative;display: flex;align-items: center;flex-direction: column;">
					<view style="width: 500rpx; height: 600rpx; background-color: #fff;border-radius: 40rpx;display: flex;justify-content: center;flex-direction: column;align-items: center;">
						<u-image width="200" height="200" src="https://img.koalalf.com/gewuyunshang/23541649902026_.pic.jpg"></u-image>
						<text style="font-size: 40rpx;color: #333;margin-top: 40rpx;font-weight: bold;">发现新版本</text>
						<view @click="upgrae()" style="
							width: 80%;
							height: 80rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #E10A07;
							border-radius: 38rpx;
							color: #fff;
							margin: 40rpx 0;
						">立即更新</view>
						<text style="font-size: 28rpx;color: #9E9E9E;" @click="closeUpgraeShow">稍后</text>
					</view>
				</view>
			</view>
		</u-overlay>
		<!-- <u-modal v-model="show" :show-title="false" :show-confirm-button="false" :show-cancel-button="false" width="440"
			border-radius="30">
			<!-- <view class="slot-content" style="width: 440rpx; height: 588rpx;">
				<u-image width="100%" height="100%" src="https://img.koalalf.com/tanchukuang.png"></u-image>
			</view> -->
		<!-- <view class="slot-content" style="width: 440rpx; height: 588rpx;">
				<u-image width="100%" height="100%" src="https://img.koalalf.com/window/index-coupon.png">
					
				</u-image>
			</view> -->
		<!-- </u-modal> -->
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	import ptList from "../../components/ptList.vue"
	import goodsItem from "../../components/waterfallGoodsItem.vue"
	
	import { indexConfig, getGenerateLink, couponDetail } from '@/common/http.api.js'
	import { appIsUpdate } from '@/common/tool.api.js'
	import { goodsList, classify } from '@/common/shopmall.api.js'

	export default {
		components: {
			ptList,
			goodsItem
		},
		mixins: [MescrollMixin],
		data() {
			return {
				
				couponMaskShow: false,
				background: {
					backgroundImage: 'linear-gradient(to left, rgba(255, 0, 60, 1) , #FF375C)'
				},
				nav: [],
				swiper: [],
				current: 0,
				upgraeShow: false,
				pagination: {
					auto: false,
					page: 1,
					pageSize: 20,
					total: 0,
				},
				loadStatus: 'loadmore',
				upOption: {
					auto: false,
					page: {
						size: 20 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: "没有更多数据了"
				},
				list: [],
				classify: [],
				classifyId: 0,
				type: 5,
				activity: [],

				miaoshaGoods:[],
				shengyuD: '00',
				shengyuH: '00',
				shengyuM: '00',
				shengyuS: '00',

				waimai: [],
				popup: [],
				coupon: {

				},
				
				now_version: '1.0.0',
				
				version:{
					download_url:''
				}
			}
		},
		onLoad({
			share_key
		}) {
			let that = this;

			let user = uni.getStorageSync('user_info')
			if (user) {
				user = JSON.parse(user)
				that.share_key = user.share_key
			} else {
				// uni.login({
				// 	provider: 'weixin',

				// 	success: function(loginRes) {
				// 		that.$u.api.wechatLogin({
				// 			code: loginRes.code,
				// 			share_key
				// 		}).then(res => {
				// 			that.token = res.token
				// 			that.share_key = res.share_key
				// 		})
				// 	}
				// });
			}


			this.getData(1)

			
			
			// #ifdef APP-PLUS
			let systemInfo = uni.getSystemInfoSync();
			plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
				if(widgetInfo.version){
					that.now_version = widgetInfo.version
				}else{
					that.now_version = plus.runtime.version
				}
				
				that.indexConfig({version:that.now_version, system: uni.getSystemInfoSync().platform})
				
				appIsUpdate({
					system: systemInfo.platform,  
					version:that.now_version,
				}).then(res => {
					console.log(res)
					that.version = res.version
					if(that.version.newest == 1){
						that.upgraeShow = true
					}
					
				})
			})
			// #endif
			
			// #ifdef MP-WEIXIN
			that.indexConfig({version:that.now_version, system: uni.getSystemInfoSync().platform})
			// #endif
		},
		mounted() {

		},
		// onReachBottom() {
		// 	this.loadStatus = 'loading';
		// 	// 模拟数据加载
		// 	setTimeout(() => {
		// 		this.getData(this.pagination.page);
		// 		this.loadStatus = 'loadmore';
		// 	}, 1000)
		// },
		methods: {
			indexConfig(params){
				let that = this;
				indexConfig(params).then((res) => {
					that.swiper = res.banner
					that.nav = res.navigation
					that.activity = res.activity
					that.miaoshaGoods = res.miaoshaGoods
					that.waimai = res.waimai
					that.popup = res.popup
				
					if (that.popup.length > 0) {
						//优惠券弹窗
						if (that.popup[0].type == 1) {
							couponDetail({
								coupon_id: that.popup[0].params.coupon_id
							}).then(res => {
								that.coupon = res
								that.couponMaskShow = true
							})
						}
					}
				
					if (that.miaoshaGoods.length > 0) {
						setInterval(function() {
							that.shengyuTime(that.miaoshaGoods[0].end_time)
						}, 1000)
					}
				})
			},
			upgrae(){
				// #ifdef APP-PLUS
				plus.runtime.openURL(this.version.download_url)
				// #endif
			},
			closeUpgraeShow(){
				this.upgraeShow = false
			},
			couponReceive(coupon_id) {
				let that = this;
				this.$u.api.couponReceive({
					coupon_id
				}).then(res => {
					that.$u.toast('领取成功');
					that.couponMaskShow = false;
				})
			},
			shengyuTime(date) {
				let endTime = new Date(date).getTime()
				let nowTime = new Date().getTime()

				let shenyu = endTime - nowTime
				let shengyuD = parseInt(shenyu / (60 * 60 * 24 * 1000)); //转换为天

				let D = parseInt(shenyu) - parseInt(shengyuD * 60 * 60 * 24 * 1000); //除去天的毫秒数

				let shengyuH = parseInt(D / (60 * 60 * 1000)); //除去天的毫秒数转换成小时

				let H = D - shengyuH * 60 * 60 * 1000; //除去天、小时的毫秒数

				let shengyuM = parseInt(H / (60 * 1000)); //除去天的毫秒数转换成分钟

				let M = H - shengyuM * 60 * 1000; //除去天、小时、分的毫秒数

				let shengyuS = parseInt((shenyu - shengyuD * 60 * 60 * 24 * 1000 - shengyuH * 60 * 60 * 1000 - shengyuM *
						60 * 1000) /
					1000); //除去天、小时、分的毫秒数转化为秒

				this.shengyuD = shengyuD;
				this.shengyuH = shengyuH < 10 ? '0' + shengyuH : shengyuH;
				this.shengyuM = shengyuM < 10 ? '0' + shengyuM : shengyuM;
				this.shengyuS = shengyuS < 10 ? '0' + shengyuS : shengyuS;
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			},

			clickSwiper(index) {
				let clickSwiper = this.swiper[index]
				this.openPage(clickSwiper.page, clickSwiper.params)
			},
			async openPageNav(params) {
				let that = this;
				if (params.type == "tabbar") {
					this.$u.route({
						type: 'tab',
						url: params.page,
						params: params.params
					})
				} else if (params.type == "generateLink") {
					let generateLink = await getGenerateLink(params.params)

					if (generateLink.redirect_type == 'web') {
						this.$u.route({
							url: "pages/common/webview",
							params: {
								src: generateLink.url
							}
						})
					} else if (generateLink.redirect_type == 'mini') {
						uni.navigateToMiniProgram({
							appId: generateLink.appid,
							path: generateLink.url,
							success(res) {
								// 打开成功
							},
							fail(err) {
								console.log(err)
							}
						})
					}
				} else {
					this.$u.route({
						url: params.page,
						params: params.params
					})
				}
			},
			openPage(path, params) {
				this.$u.route({
					url: path,
					params
				})
			},
			getClassify() {
				let that = this;
				classify({
					type: this.type
				}).then(res => {
					that.classify = res
				})
			},
			getData(page) {
				let that = this;
				goodsList({
					page,
					pageSize: this.pagination.pageSize,
					type: this.type,
					classify_id: this.classifyId
				}).then(res => {
					that.mescroll.endByPage(res.data.length, res.pagination.total)
					that.pagination = res.pagination;
					if (page == 1) {
						that.list = res.data
					} else {
						that.list = [...that.list, ...res.data]
					}
					that.pagination.page++
				})
			},
			upCallback() {
				this.getData(this.pagination.page)
			},
			downCallback() {
				this.pagination.page = 1;
				this.mescroll.resetUpScroll();
			},
			ptChange(type) {
				this.type = type
				this.getClassify()
				this.getData(1)
			},
			tabChange(index) {
				this.current = index
				this.classifyId = this.classify[index].id
				this.getData(1)
			},
		}
	}
</script>
<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>

<style lang="scss" scoped>
	body {
		background-color: #f5f5f5;
	}

	.content {
		background-color: #f5f5f5;
		// height: 100vh;
	}

	.topBg {
		// background-image: linear-gradient(to left, rgba(255, 0, 60, 1), #FF375C);
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}

	.index-search {
		// width: 344rpx;
		height: 54rpx;
		flex: 1;
		background-color: #fff;
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		padding-left: 24rpx;
		margin-left: 20rpx;
	}

	.banner {
		// width: 710rpx;
		// margin: 10rpx auto;
		// border-radius: 60rpx;
		overflow: hidden;
	}

	.waimai {
		width: 710rpx;
		height: 186rpx;
		background-size: 100%;
		margin-bottom: 20rpx;

		.waimai-content {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			height: 100%;
		}

		.lingqu {
			background-color: #FC8B24;
			border-radius: 30rpx;
			color: #fff;
			height: 60rpx;
			width: 160rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			margin-right: 22rpx;
		}
	}

	.warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		position: relative;
	}
</style>
